<template>
  <div id="app">
    <Layout :style="{ height: '100%' }">
      <Sider
        :style="{
          width: '256px',
          'min-width': '256px',
          'max-width': '256px',
          flex: '0 0 256px'
        }"
        hide-trigger
      >
        <slot name="menuHead"></slot>
        <layout-menu :menu-data="menuData" />
      </Sider>
      <Layout>
        <Header class="yui-header">
          <div class="header-tags-content" ref="tagsContent">
            <tags-view />
          </div>
          <div class="yui-header--user">
            <slot name="header-user"></slot>
          </div>
        </Header>
        <Content :style="{ display: 'flex', 'flex-direction': 'column' }">
          <div :style="{ flex: 1, position: 'relative' }">
            <keep-alive>
              <router-view v-if="$route.meta.keepAlive"></router-view>
            </keep-alive>
            <router-view v-if="!$route.meta.keepAlive"></router-view>
          </div>
        </Content>
      </Layout>
    </Layout>
    <slot> </slot>
  </div>
</template>
<script>
import TagsView from "../tags-view/TagsView.vue";
import LayoutMenu from "../layout-menu/LayoutMenu.vue";
export default {
  name: "LayoutContainer",
  components: {
    LayoutMenu,
    TagsView
  },
  props: {
    menuData: {
      type: Array,
      default: () => []
    }
  },

  data() {
    return {
      theme2: "light"
    };
  }
};
</script>
<style lang="scss">
html,
body,
#app {
  height: 100%;
  overflow-x: hidden;
}

.layout-menu {
  // height: calc(100vh - 42px);
  overflow-y: auto;

  // color: $sider-txt-color;
  // background-color: $bg-color;
  &::-webkit-scrollbar {
    display: none;
  }
  &:after {
    content: "" !important;
    width: 0 !important;
  }
}
</style>
